¡Hola 👋! Espera mientras comienza la sesión.

Antes que todo, ¿cómo están?

Visualización de Información

IIC2026 2021-2

Introducción a JavaScript y D3.js

Visualización de Información

IIC2026 2021-2

Contenido

Contenido


1. JavaScript I

2. JavaScript II

3. DOM

4. D3.js

Implementación algorítmica

  • Código.
  • Nivel técnico tecnológico.
  • Se revisa eficiencia, escalabilidad y dificultad.
Caracterización de dominio
Abstracción de datos y tareas
Codificación visual y de interacción
Implementación algorítmica 

            // programa_1.js
            let arreglo = [];

            for (let numero = 0; numero <= 20; numero += 2) {
              arreglo.push(numero);
            }

            for (numero of arreglo) {
              console.log(numero);
            }
          

            <!DOCTYPE html>
            <html>
                
              <head>
                <meta charset="utf-8">
                <title>Ejemplo con JS 1</title>
              </head>
            
              <body>
                
                <script src='programa_1.js' charset='utf-8'></script>
              </body>
            </html>

JavaScript


¡Es mucho! Iremos revisando detalles nuevos a medida que pasa el curso.

Ten curiosidad y busca en la web por referencias de aprendizaje. Recomiendo: MDN Web Docs.

¡O pregúntanos! 😄

Document Object Model



            const raiz = document.getElementById("raiz");
            const principal = document.getElementById("principal");
            
            let contador = 0;
            
            principal.addEventListener("click", () => {
              contador += 1;
            
              const parrafo = document.createElement("p");
              const texto = document.createTextNode(`Número de clics: ${contador}`);
              parrafo.appendChild(texto);
            
              raiz.appendChild(parrafo);
            });

¡Visualización del día!

¡Visualización del día!

Propuesto por estudiante Rosita Muñoz.

(Fuente: U.S. Gun Deaths)

¡Actividad grupal!

¡Actividad grupal!

Cada grupo asignado a una Sala de Zoom debe completar en conjunto un programa de JavaScript que extiende un documento HTML. Los objetivos a lograr como grupo son:

  • Escribir una lista no ordenada en el documento HTML con los nombres de las personas que forman el grupo.
  • El programa contiene una lista de datos que hay que codificar mediante un o varios elementos SVG en el documento HTML. El programa debe agregar dichos datos en base a sus valores, de manera que alterar los valores alteren el resultado llegado. El cómo codificar los datos mediante elementos SVG queda a criterio del grupo.
  • Al hacer clic sobre el o los elementos SVG agregados, estos deben desaparecer del documento.

¡Actividad grupal!


Les recomendamos que por grupo asignen:

  • Al menos una persona que tenga el material del curso y documentación de JavaScript a mano para consultarla.
  • Al menos una persona que recompile dudas que surgieron en el grupo al realizar la actividad y se mentienen al final de la actividad.
  • Al menos una persona que se encargue de escribir y extender el documento HTML y programa JavaScript.
  • El resto puede apoyar a quienes escriban.

¡Actividad grupal!


Para colaborar en el código, pueden:

El equipo docente les preparó salas en Coding Rooms. Para ingresar y colaborar deben entrar a un enlace y luego:

  1. Por defecto, entrarán a la sala solo con permiso de lectura, por lo que un ayudante les asignará el rol de editor a les primeres que entren.
  2. Si ya tienen rol de editor, pueden darle este rol a otros estudiantes. Para ello:
    1. Presionen el botón ‘Share’ en la parte superior derecha.
    2. En el cuadro desplegado, cambia el rol de todes les ‘Viewer’ a ‘Editor’ (Si no salen en el cuadro desplegado, recarguen la página)
  3. Para poder ver cómo va quedando su código, despliguen la vista de navegador en el botón ‘View Webpage’ de la parte inferior derecha.
  4. ¡Listo! Ya pueden ponerse a trabajar conjuntamente en su HTML y SVG.

¡Actividad grupal!

Salas y documentos asignados:

Resultados de actividad grupal

Próximos eventos:


Hoy (11:30) se publica el enunciado de Entrega 1.

Próximo jueves se publica el enunciado de Hito 1.

Próxima semana revisaremos el material de Color e Principios de diseño en visualización.

Introducción a JavaScript y D3.js

Visualización de Información

IIC2026 2021-2


¡Nos vemos!